<template>
    <van-popup class="modal-transparent" v-model:show="show" :close-on-click-overlay="false" teleport="body">
        <div class="modal-container">
            <div class="title">New version update</div>
            <div class="version">V{{version}}</div>
            <div class="content">{{vueState.versionControl.appName}} the new version is here, update it to earn money.</div>
            <div class="button" @click="submit">Update Now</div>
        </div>
        <div class="modal-close">
            <div class="icon" @click="close"></div>
        </div>
    </van-popup>
</template>
<script>
import { inject } from 'vue'
export default {
    props:['show','version'],
    setup(props,ctx) {
        const vueState = inject('vueState')
        const submit = ()=> {
            ctx.emit('submit')
        }
        const close = ()=>{
            ctx.emit('update:show',false)
        }
        return {
            submit,
            close,
            vueState
        }
    }
}
</script>
<style lang="less" scoped>
.modal{
    &-container{
        width:2.85rem;
        height:3.84rem;
        background: url(../../assets/images/Modal/update_bg.png) no-repeat center;
        background-size: contain;
        padding: 1.42rem .4rem .28rem;
        .title{
            font-size: .2rem;
            font-weight: 700;
            color:#313131;
            line-height: .32rem;
            text-align: center;
        }
        .version{
            font-size: .14rem;
            font-weight: 400;
            color:#9C9DA6;
            line-height: .24rem;
            text-align: center;
        }
        .content{
            margin-top: .16rem;
            font-size: .14rem;
            font-weight: 400;
            color:#9C9DA6;
            line-height: .24rem;
        }
        .button{
            .unique-button();
            width: 2rem;
            height: .44rem;
            font-size: .16rem;
            margin: .5rem auto 0;
        }
    }
    &-close{
        display: flex;
        justify-content:center;
        .icon{

            margin-top:.16rem;
            height: .36rem;
            width: .36rem;
            background: url(../../assets/images/Modal/modal_close_white.svg) no-repeat center;
            background-size: contain;
        }
    }
}
</style>
